<template>
  <div class="container" ref="containerRef">
    <Chart ref="chartRef" :option="option"></Chart>
  </div>
</template>

<script setup lang="ts">
import Chart from "@/components/charts/index.vue";
import { ECOption } from "@/components/charts/index";

const option: ECOption = {
  title: { text: "ECharts 入门示例" },
  tooltip: { trigger: "axis" },
  xAxis: {
    type: "category",
    data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
  },
  yAxis: {
    type: "value",
  },
  series: [
    {
      data: [150, 230, 224, 218, 135, 147, 260],
      type: "line",
    },
  ],
};

const containerRef = ref<HTMLDivElement>();
const chartRef = ref<InstanceType<typeof Chart>>();

onMounted(() => {
  window.addEventListener("resize", () => {
    chartRef.value?.getChartInstance()?.resize();
  });
});

onUnmounted(() => {});
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
}
</style>
